<!-- 热门景区 -->
<template>
  <div class="hotPop">
    <div class="container">
      <!-- 标题 -->
      <div class="tit">热门景区排行</div>
      <!-- exharts热门景区排行榜 -->
      <div class="echarts" ref="charts">
        <table>
          <!-- 头部 -->
          <thead>
            <tr>
              <th>排名</th>
              <th>景区</th>
              <th>预约数</th>
            </tr>
          </thead>
          <!-- 主题 -->
          <tbody>
            <tr>
              <td>
                <SvgIcon name="No1" width="40px" height="40px" />
                No.1
              </td>
              <td>灵谷峰</td>
              <td class="no1"></td>
            </tr>
            <tr>
              <td>
                <SvgIcon name="No2" width="40px" height="40px" />
                No.2
              </td>
              <td>仙盖山</td>
              <td class="no2"></td>
            </tr>
            <tr>
              <td>
                <SvgIcon name="No3" width="40px" height="40px" />
                No.3
              </td>
              <td>武功山</td>
              <td class="no3"></td>
            </tr>
            <tr>
              <td>
                <SvgIcon name="No4" width="40px" height="40px" />
                No.4
              </td>
              <td>明月山</td>
              <td class="no4"></td>
            </tr>
            <tr>
              <td>
                <SvgIcon name="No5" width="40px" height="40px" />
                No.5
              </td>
              <td>庐山</td>
              <td class="no5"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.hotPop {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    height: 100%;
    background: url('../../images/dataScreen-main-rt.png') no-repeat;
    background-size: 100% 100%;
    /* 标题 */
    .tit {
      width: 100%;
      height: 40px;
      color: #ffff;
      font-size: 22px;
      background: url('../../images/dataScreen-title.png') no-repeat left bottom;
    }
    /* exharts热门景区排行榜 */
    .echarts {
      padding: 0 10px;
      width: 100%;
      height: 100%;
      table {
        margin-top: 10px;
        height: 100%;
        width: 100%;
        tr {
          flex: 1;
          width: 100%;
          display: flex;
        }
        thead {
          width: 100%;
          font-size: 20px;
          line-height: 20px;
          color: orange;
          background: url('../../images/line-bg.png') no-repeat;
          background-size: 100% 100%;
          tr {
            th {
              @include flexible(center);
              flex: 1;
              text-align: left;
              padding-left: 5px;
            }
          }
        }
        tbody {
          display: block;
          margin-top: 10px;
          flex: 1;
          width: 100%;
          font-size: 20px;
          color: orange;
          tr {
            flex: 1;
            td {
              @include flexible(center);
              flex: 1;
              padding-left: 5px;
              :nth-child(1) {
                margin-left: -2px;
              }
            }
          }
        }
      }
    }
  }
  /* 预约数量样式 */
  .no1 {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 20px;
    border: 1px solid #0852e4;
    border-radius: 20px;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      background-color: rgb(51, 235, 10);
      width: 80%;
      height: 100%;
      border-radius: 20px;
    }
    &::after {
      position: absolute;
      right: 0;
      content: '80%';
      color: #ffff;
      z-index: 1;
      font-size: 17px;
    }
  }
  .no2 {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 20px;
    border: 1px solid #0852e4;
    border-radius: 20px;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      background-color: rgb(9, 168, 236);
      width: 70%;
      height: 100%;
      border-radius: 20px;
    }
    &::after {
      position: absolute;
      right: 0;
      content: '70%';
      color: #ffff;
      z-index: 1;
      font-size: 17px;
    }
  }
  .no3 {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 20px;
    border: 1px solid #0852e4;
    border-radius: 20px;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      background-color: rgb(68, 14, 244);
      width: 60%;
      height: 100%;
      border-radius: 20px;
    }
    &::after {
      position: absolute;
      right: 0;
      content: '60%';
      color: #ffff;
      z-index: 1;
      font-size: 17px;
    }
  }
  .no4 {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 20px;
    border: 1px solid #0852e4;
    border-radius: 20px;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      background-color: rgb(237, 15, 237);
      width: 50%;
      height: 100%;
      border-radius: 20px;
    }
    &::after {
      position: absolute;
      right: 0;
      content: '50%';
      color: #ffff;
      z-index: 1;
      font-size: 17px;
    }
  }
  .no5 {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 20px;
    border: 1px solid #0852e4;
    border-radius: 20px;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      background-color: rgb(249, 16, 16);
      width: 50%;
      height: 100%;
      border-radius: 20px;
    }
    &::after {
      position: absolute;
      right: 0;
      content: '50%';
      color: #ffff;
      z-index: 1;
      font-size: 17px;
    }
  }
}
</style>
